﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报名</title>
    <link rel="stylesheet" href="css/amazeui.css">
    <link href="css/amazeui.datetimepicker.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <script src="http://file.jiaoxin-tech.cn/help/js/upyun.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        * {
            padding: 0;
            border: 0;
            margin: 0;
        }

        .veads1_i1 {
            display: block;
            float: left;
            margin-top: 2%;
            width: 2.5%;
        }

        .veads1_s1 {
            display: block;
            text-align: center;
            font-size: 1.8rem;
        }

        .orde_01 {
            width: 100%;
            overflow: hidden;
            padding: 5% 5%;
        }

        .orde1_s1 {
            color: #505050;
            font-size: 1.4rem;
            display: block;
            margin-right: 5%;
            float: left;
        }

        .orde1_s2 {
            font-size: 1.4rem;
            font-weight: 500;
            display: block;
            float: left;
            color: #101010;
        }

        .orde1_s3 {
            color: #ff9129;
            font-size: 1.9rem;
        }
    </style>
</head>
<body>
    <div id="page1" v-cloak>
        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211); ">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black;">报名</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>
        <div class="am-form" data-am-validator>
            <div class="orde_01">
                <div class="am-g" style="margin-bottom: 3%">
                    <div class="am-u-sm-3" style="padding: 0">
                        <span class="orde1_s1">活动时间</span>
                    </div>
                    <div class="am-u-sm-9" style="padding: 0">
                        <span class="orde1_s2">{{actinfo.startTime}}-{{actinfo.endTime}}</span>
                    </div>
                </div>
                <div class="am-g" style="margin-bottom: 3%">
                    <div class="am-u-sm-3" style="padding: 0">
                        <span class="orde1_s1">票种名称</span>
                    </div>
                    <div class="am-u-sm-9" style="padding: 0">
                        <span class="orde1_s2">{{actit.Name}}</span>
                    </div>
                </div>
                <div class="am-g" style="margin-bottom: 3%">
                    <div class="am-u-sm-3" style="padding: 0">
                        <span class="orde1_s1">价格</span>
                    </div>
                    <div class="am-u-sm-9" style="padding: 0">
                        <span class="orde1_s2">{{actit.Price}}元</span>
                    </div>
                </div>
            </div>
            <fieldset>
                <div v-for="item in formdata.item" class="formclass">
                    <div class="am-form-group field1" v-if="item.itemtype=='text'" v-bind:type="item.itemtype">
                        <label for="doc-ipt-name-1">{{item.i.Name}}<span style="color:red;">*</span></label>
                        <input type="text" class="" id="doc-ipt-name-1" v-bind:name="item.option[0].gId" placeholder="请输入">
                    </div>

                    <div class="am-form-group field1" v-else-if="item.itemtype=='radio'" v-bind:type="item.itemtype">
                        <label for="doc-ipt-name-1">{{item.i.Name}}<span style="color:red;">*</span></label>
                        <label class="am-radio" v-for="option in item.option">
                            <input type="radio" v-bind:value="option.gId" v-bind:name="item.i.gId"> {{option.Name}}
                        </label>
                    </div>
                    <div class="am-form-group field1" v-else-if="item.itemtype=='checkbox'" v-bind:type="item.itemtype">
                        <label for="doc-ipt-name-1">{{item.i.Name}}<span style="color:red;">*</span></label>
                        <label class="am-checkbox" v-for="option in item.option">
                            <input type="checkbox" v-bind:value="option.gId" v-bind:name="item.i.gId"> {{option.Name}}
                        </label>
                    </div>
                </div>
            </fieldset>
        </div>
        <button type="button" class="am-btn am-btn-default am-radius" style="width: 90%;display: block;margin: 0 auto;background: #23c788;color: #fff;border-radius: 5px" v-on:click="tijiao()">报名</button>
    </div>
</body>
</html>
<script src="js/zishiying.js"></script>
<script>
    var page = new Vue({
        el: '#page1',
        data: {
            gId: '',
            formdata: [],
            actinfo: {},
            actit: {},
        },
        methods: {
            getforminfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Field/GetActivityForm?gId=' + that.gId,
                    success: function (data) {
                        //console.log(data);
                        if (data.errcode == 0) {
                            that.actinfo = data.data.activityInfo;
                            that.actit = data.data.actit;
                            that.formdata = data.data.subform;
                            console.log(that.formdata);
                        } else {
                            alert(data.errmsg);
                        }
                    },
                })
            },
            tijiao: function () {
                var that = this;
                var Arr = [];
                $(".formclass .field1").each(function () {
                    var item = [];
                    var value = "";
                    var content = "";
                    if ($(this).attr("type") == "text") {//文本框
                        value = $(this).find("input[type=text]").attr('name');
                        content = $(this).find("input[type=text]").val();
                        item.push({ "value": value, "content": content });
                    }
                    else if ($(this).attr("type") == "radio") {//单选
                        var $check = $(this).find("input[type=radio]:checked");
                        value = $check.attr("value");
                        content = "";
                        if ($check.parent().parent().find('.next1').length == 1) {
                            content = $check.parent().parent().find("input[type=text]").eq(0).val();
                        }
                        item.push({ "value": value, "content": content });
                    }
                    else if ($(this).attr("type") == "checkbox") {//多选
                        $(this).find("input[type=checkbox]:checked").each(function () {
                            value = $(this).attr("value");
                            content = "";
                            item.push({ "value": value, "content": content });
                        })
                    }
                    Arr.push({ "actid": that.actinfo.Act.gId, "item": item });
                })
                //console.log(Arr);
                var jsonText = JSON.stringify(Arr);
                $.ajax({
                    url: apiUrl + "/Api/Field/AddActivityForm",
                    data: { "gId": that.gId, "jsonText": jsonText },
                    type: "POST",
                    success: function (data) {
                        if (data.errcode == 0) {
                            location.replace("MyActivityInfo.html?gId=" + data.data.gId);
                        } else {
                            alert(data.errmsg);
                        }

                    },
                })

            }
        }
    })
    $(function () {
        var gId = $.getParam("gId");
        page.gId = gId;
        page.getforminfo();
    })

</script>
